<template>
  <div class="wrapper">
    <city-header></city-header>
    <city-search :cities = "cities"></city-search>
    <city-list :hotCities = 'hotCities' :cities = 'cities' :letter = "letter"></city-list>
    <city-alphabet @change = "handleLetterChange" :cities = "cities"></city-alphabet>   
  </div>
</template>

<script> 
import cityHeader from './components/Header' 
import citySearch from './components/search'
import cityList from './components/list'
import cityAlphabet from './components/alphabet'
export default {
  components:{
    cityHeader,
    citySearch,
    cityList,
    cityAlphabet
  },
  props:{},
  data(){
    return {
        cities:{},
        hotCities:[],
        letter:''
    }
  },
  watch:{},
  computed:{},
  methods:{
    getCityInfo(){
        this.axios.get('./api/city.json')
        .then(this.handleGetCityInfoSucc)
    },
    handleGetCityInfoSucc(res){
        if(res.data.ret){
            this.cities = res.data.data.cities
            this.hotCities = res.data.data.hotCities
        }
        //console.log(res)
    },
    handleLetterChange(letter){
       this.letter = letter
    }  
  },
  created(){},
  mounted(){
      this.getCityInfo()
  }
}
</script>
<style lang="stylus" scoped>
.wrapper{}
</style>